<html>

<head>
  <link href="https://unpkg.com/layui@2.9.8/dist/css/layui.css" rel="stylesheet">
  <script src="https://unpkg.com/layui@2.9.8/dist/layui.js"></script>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
  <div id="app">
    <h2 style="margin-top: 30px">{{message}}</h2>
    <div style="margin: 0px auto;width: 500px;">
      <div style="display: flex;justify-content: center;margin: 30px 0;">
        <input v-model="value" style="width: 100%" type="text" placeholder="问题" class="layui-input"></input>
        <button ref="searchBtn" @click="search" id="searchBtn" class="layui-btn" style="margin-left: 10px;">发送</button>
      </div>
      <div  >
        <div v-for="item in content" >
          <div style="display: flex;margin-top: 10px;" >
            <div style="margin-right: 10px;">
              <img style="width: 30px;height: 30px;border-radius: 50%;" v-if="item.role == 'user'" src="https://img0.baidu.com/it/u=962926232,2631347310&fm=253&fmt=auto&app=120&f=JPEG?w=1035&h=800" alt="">
              <img style="width: 30px;height: 30px;border-radius: 50%;" v-else="item.role == 'user'" src="https://img0.baidu.com/it/u=1433959482,674842229&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500" alt="">
            </div>
            <div style="margin-top: 5px;">
              <div v-if="item.role == 'user'"  >
                {{item.content}}
              </div>
              <div v-else  >
                <div  v-html="item.content" >
                </div>
              </div>
            </div>
            
          </div>
        </div>
      </div>
    </div>
    <div v-show="isLoDing" class="zz">
      <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop loding"></i>
    </div>
  </div>
</body>

</html>
<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref('欢迎使用老韩问问,请输入您的问题')
      // const content = ref('你好！有什么可以帮助你的吗？')
      const content = ref([])

      const value = ref('')
      let isLoDing = ref(false)
      function blur(e) {
        console.log('---', e.target.value)
        send(e.target.value)
      }
      function search() {
        content.value.push({
          role:'user',
          content:value.value
        })
        send(content.value)
        value.value = ''
      }
      function send(message) {
        isLoDing.value = true
        axios({
          method: 'post',
          responseType: 'stream',
          url: "https://ai98.vip/v1/chat/completions",
          headers: {
            "Content-Type": "application/json",
            "Authorization": "Bearer sk-UgtZ6M4qw7Ycfzok0cC1E8C690A04b92B38e381c4c5661D5"
          },
          data: {
            model: "gpt-3.5-turbo",
            messages: message
          }
        })
          .then(function (response) {
            isLoDing.value = false
            console.log('hhh', JSON.parse(response.data).choices[0].message.content);
            content.value.push(JSON.parse(response.data).choices[0].message)
            // content.value = JSON.parse(response.data).choices[0].message.content
          })
          .catch(function (error) {
            isLoDing.value = false
            console.log(error);
          });
      }
      // send()
      return {
        message,
        content,
        isLoDing,
        value,
        blur,
        search,
      }
    }
  }).mount('#app')
</script>

<style>
  #app {
    text-align: center;
  }

  .zz {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .6);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .loding{
    font-size: 40px;
  }
</style>